<template>
  <section class="todoapp">
    <hm-header @add="handdelAdd"></hm-header>
    <hm-main :list="list"
    @changeState="handleChangeState"
    @del="handdel"
    ></hm-main>
    <hm-footer ></hm-footer>
  </section>
</template>

<script>
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter
  },
  data(){
    return{
      list:[
        {id:1,name:"吃饭",flag:false},
        {id:2,name:"睡觉",flag:true},
        {id:3,name:"打豆豆",flag:false},
      ]
    }
  },
  methods:{
    handdel(id){
      // console.log(`laiole`,id)
      this.list=this.list.filter(item=>item.id!==id)
    },
    handdelAdd(todoName){
      this.list.unshift({
        id:+new Date(),
        name:todoName,
        flag:false
      })
    },
    handleChangeState(flag,id){
      // console.log(flag,id)
      const obj=this.list.find(item =>item.id=== id)
      obj.flag=flag
    }
  }
}
</script>

<style></style>
